<h3>Create a variables set</h3>
<form nz-form (ngSubmit)="createVariableSet()">
    <nz-row>
        <nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label>Name</nz-form-label>
                <nz-form-control>
                    <input nz-input name="name" id="vsname" [(ngModel)]="newVariableSetName">
                </nz-form-control>
            </nz-form-item>
        </nz-col>
        <nz-col [nzOffset]="1">
            <nz-form-item>
                <button nz-button nzType="primary" [nzLoading]="loading.action">Create</button>
            </nz-form-item>
        </nz-col>
    </nz-row>
</form>

<h3>Variables sets list:</h3>
<div class="list">
    <nz-table #table [nzData]="variableSets" [nsAutoHeightTable]="39" [nzFrontPagination]="false" nzSize="small"
        [nzLoading]="loading.list">
        <thead>
            <tr>
                <th>Name</th>
                <th>Deletion</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of table.data">
                <td (click)="selectVariableSet(data)">{{data.name}}</td>
                <td>
                    <button nz-button nzDanger nzType="primary" [nzLoading]="loading.action" nz-popconfirm
                        nzPopconfirmTitle="Are you sure you want to delete this variableset ? it will remove all items"
                        (nzOnConfirm)="deleteVariableSet(data)">Delete</button>
                </td>
            </tr>
        </tbody>
    </nz-table>
    <nz-drawer class="toto" nzPlacement="right" [nzWidth]="1000" [nzTitle]="selectedVariableSet?.name"
        [nzVisible]="selectedVariableSet" (nzOnClose)="unselectVariableSet()">
        <ng-container *nzDrawerContent>
            <app-project-variable-set-items [project]="project"
                [variableSet]="selectedVariableSet"></app-project-variable-set-items>
        </ng-container>
    </nz-drawer>
</div>